<template>
    <div id="netpan">
        <div class="left">
            <div class="control">
                <el-button-group v-if="selectedFiles.length" class="group">
                    <!-- <el-button type="primary" plain>
                        <template #icon>
                            <svg t="1671013797446" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2545" width="200" height="200">
                                <path
                                    d="M938.8032 983.04H81.92V40.96h568.32l287.4368 323.9936H590.848V122.88H163.84v778.24h693.0432V482.6112h81.92z m-266.24-699.5968h82.8416L672.768 189.44z"
                                    fill="#3080E9" p-id="2546"></path>
                                <path d="M316.8256 118.272h81.92v66.7648h-81.92z" fill="#3080E9" p-id="2547"></path>
                                <path d="M266.3424 168.1408h182.784v81.92H266.3424z" fill="#3080E9" p-id="2548"></path>
                                <path
                                    d="M252.928 530.432L197.12 471.04a286.72 286.72 0 0 0 45.568-54.9888l69.0176 44.2368a371.0976 371.0976 0 0 1-58.7776 70.144z m70.4512-90.112l-71.68-40.1408a356.1472 356.1472 0 0 0 28.8768-67.3792l78.1312 24.576a430.08 430.08 0 0 1-35.328 82.944z m41.8816-104.5504l-79.2576-20.48a348.16 348.16 0 0 0 11.4688-71.68l81.92 1.536a419.84 419.84 0 0 1-14.1312 90.4192z"
                                    fill="#3080E9" p-id="2549"></path>
                                <path
                                    d="M740.0448 835.072a523.9808 523.9808 0 0 1-78.0288-42.2912L706.56 724.2752a426.9056 426.9056 0 0 0 65.7408 35.6352z m-96.3584-54.8864a586.752 586.752 0 0 1-67.2768-56.6272l57.2416-58.5728a500.4288 500.4288 0 0 0 57.856 48.64z m-82.6368-71.68a721.5104 721.5104 0 0 1-56.1152-66.4576l65.6384-49.0496a616.96 616.96 0 0 0 49.5616 58.7776zM492.2368 624.64a879.57504 879.57504 0 0 1-45.7728-72.8064l71.68-40.2432c13.1072 23.1424 27.0336 45.2608 41.5744 65.8432z m-56.1152-92.16c-13.1072-24.4736-25.6-50.3808-37.0688-77.0048l75.1616-32.4608c10.24 24.4736 22.1184 48.3328 34.0992 70.7584z m-45.3632-96.5632c-10.24-26.0096-20.48-52.8384-29.2864-79.872l77.824-25.3952c8.192 25.088 17.408 50.0736 27.2384 74.1376z m-35.7376-100.0448a835.584 835.584 0 0 1-21.7088-83.968l80.4864-15.2576a764.5184 764.5184 0 0 0 19.5584 75.264z"
                                    fill="#3080E9" p-id="2550"></path>
                            </svg>
                        </template>
                        <span>
                            云解压
                        </span>
                    </el-button> -->
                    <!-- <el-button type="primary" plain>
                        <template #icon>
                            <svg t="1671013842554" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3495" width="200" height="200">
                                <path
                                    d="M768.73106 703.537712c-35.606921 0-67.945574 14.793214-91.167479 38.359147l-309.109357-171.670082c9.116748-17.545439 14.621199-37.155048 14.621199-58.312783 0-12.55703-2.408198-24.426004-5.676466-35.950949l304.63699-189.215522c22.705863 20.469679 52.464304 33.198723 85.146985 33.198723 70.525785 0 127.978498-57.452713 127.978498-127.978498S837.708718 63.989249 767.182933 63.989249s-127.978498 57.452713-127.978498 127.978498c0 14.621199 2.92424 28.382328 7.396607 41.455401L344.716278 420.746514c-23.049891-22.705863-54.700487-36.983034-89.791366-36.983034-70.525785 0-127.978498 57.452713-127.978498 127.978498s57.452713 127.978498 127.978498 127.978498c25.630102 0 49.540064-7.740635 69.493701-20.813707l321.150344 178.378633c-3.096254 11.008903-5.160423 22.18982-5.160423 34.058794 0 70.525785 57.452713 127.978498 127.978498 127.978498s127.978498-57.452713 127.978498-127.978498S839.256845 703.537712 768.73106 703.537712zM767.182933 127.978498c35.262893 0 63.989249 28.726356 63.989249 63.989249s-28.726356 63.989249-63.989249 63.989249-63.989249-28.726356-63.989249-63.989249S731.92004 127.978498 767.182933 127.978498zM191.107677 511.913993c0-35.262893 28.726356-63.989249 63.989249-63.989249s63.989249 28.726356 63.989249 63.989249-28.726356 63.989249-63.989249 63.989249S191.107677 547.176886 191.107677 511.913993zM768.73106 895.505459c-35.262893 0-63.989249-28.726356-63.989249-63.989249s28.726356-63.989249 63.989249-63.989249 63.989249 28.726356 63.989249 63.989249C832.720309 866.951117 803.993953 895.505459 768.73106 895.505459z"
                                    fill="#1296db" p-id="3496"></path>
                            </svg>
                        </template>
                        <span>
                            分享
                        </span>
                    </el-button> -->
                    <el-button type="primary" plain @click="downloadFile">
                        <template #icon>
                            <svg t="1671014036573" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4514" width="200" height="200">
                                <path
                                    d="M828.975746 894.125047 190.189132 894.125047c-70.550823 0-127.753639-57.18542-127.753639-127.752616L62.435493 606.674243c0-17.634636 14.308891-31.933293 31.93227-31.933293l63.889099 0c17.634636 0 31.93227 14.298658 31.93227 31.933293l0 95.821369c0 35.282574 28.596292 63.877843 63.87682 63.877843L765.098927 766.373455c35.281551 0 63.87682-28.595268 63.87682-63.877843l0-95.821369c0-17.634636 14.298658-31.933293 31.943526-31.933293l63.877843 0c17.634636 0 31.933293 14.298658 31.933293 31.933293l0 159.699212C956.729385 836.939627 899.538849 894.125047 828.975746 894.125047L828.975746 894.125047zM249.938957 267.509636c12.921287-12.919241 33.884738-12.919241 46.807049 0l148.97087 148.971893L445.716876 94.89323c0-17.634636 14.300704-31.94762 31.933293-31.94762l63.875796 0c17.637706 0 31.945573 14.312984 31.945573 31.94762l0 321.588299 148.97087-148.971893c12.921287-12.919241 33.875528-12.919241 46.796816 0l46.814212 46.818305c12.921287 12.922311 12.921287 33.874505 0 46.807049L552.261471 624.930025c-1.140986 1.137916-21.664416 13.68365-42.315758 13.69286-20.87647 0.010233-41.878806-12.541641-43.020816-13.69286L203.121676 361.13499c-12.922311-12.933567-12.922311-33.884738 0-46.807049L249.938957 267.509636 249.938957 267.509636z"
                                    fill="#1296db" p-id="4515"></path>
                            </svg>
                        </template>
                        <span>
                            下载
                        </span>
                    </el-button>
                    <el-button type="primary" plain @click="deleteFile">
                        <template #icon>
                            <svg t="1671014056699" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="5506" width="200" height="200">
                                <path
                                    d="M256 298.666667h512v554.666666H256V298.666667z m85.333333 85.333333v384h341.333334V384H341.333333z m42.666667 85.333333h85.333333v213.333334H384v-213.333334z m170.666667 0h85.333333v213.333334h-85.333333v-213.333334zM213.333333 298.666667h597.333334v85.333333H213.333333V298.666667z m170.666667-128h256v85.333333H384V170.666667z"
                                    fill="#1296db" p-id="5507"></path>
                            </svg>
                        </template>
                        <span>
                            删除
                        </span>
                    </el-button>
                    <el-button type="primary" plain v-if="selectedFiles.length == 1" @click="rename">
                        <template #icon>
                            <svg t="1671014079342" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="6171" width="200" height="200">
                                <path
                                    d="M64 800H53.76a31.36 31.36 0 0 1-19.84-40.32l128-384A32.64 32.64 0 0 1 192 352a32.64 32.64 0 0 1 30.08 21.76l128 384a32 32 0 1 1-60.16 20.48L192 485.12l-97.92 293.12a30.72 30.72 0 0 1-30.08 21.76z"
                                    fill="#1296db" p-id="6172"></path>
                                <path
                                    d="M256 672H128a32 32 0 0 1 0-64h128a32 32 0 0 1 0 64zM768 768h-96a32 32 0 0 1-32-32v-192a32 32 0 0 1 32-32H768a128 128 0 0 1 0 256z m-64-64h64a64 64 0 0 0 0-128h-64z"
                                    fill="#1296db" p-id="6173"></path>
                                <path
                                    d="M832 960h-160a32 32 0 0 1-32-32v-192a32 32 0 0 1 32-32H832a128 128 0 0 1 0 256z m-128-64h128a64 64 0 0 0 0-128h-128zM773.76 434.56a32 32 0 0 1-21.12-7.68l-96-85.12a31.36 31.36 0 0 1 0-44.8 32.64 32.64 0 0 1 45.44 0l71.68 64 64-71.68a31.36 31.36 0 0 1 44.8 0 32.64 32.64 0 0 1 0 45.44l-84.48 96a33.92 33.92 0 0 1-22.4 10.88z"
                                    fill="#1296db" p-id="6174"></path>
                                <path
                                    d="M768 384a32 32 0 0 1-32-32 224 224 0 0 0-432-83.84 32 32 0 0 1-58.88-24.32A288 288 0 0 1 800 352a32 32 0 0 1-32 32z"
                                    fill="#1296db" p-id="6175"></path>
                            </svg>
                        </template>
                        <span>
                            重命名
                        </span>
                    </el-button>
                    <el-button type="primary" plain @click="cut">
                        <template #icon>
                            <svg t="1671361372981" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3514" width="200" height="200">
                                <path
                                    d="M804.09176747 91.389952l-300.20949334 383.565824L187.72022613 75.63946667s-98.29853867 120.848384-5.31387733 249.55016533c92.99012267 128.74001067 321.47592533 388.808704 321.47592533 388.808704l332.08183467-417.693696s53.149696-97.19534933-31.87234133-204.914688z m-302.63432534 542.523392c-25.70103467 0-46.51963733-20.58922667-46.51963733-46.00081067 0-25.40612267 20.81860267-45.99534933 46.51963733-45.99534933 25.690112 0 46.514176 20.58922667 46.514176 45.99534933 0 25.411584-20.824064 46.00081067-46.514176 46.00081067z m195.805184 9.46449067c-85.475328 0-154.763264 68.517888-154.763264 153.03748266 0 84.51413333 69.29339733 153.03748267 154.763264 153.03748267 85.475328 0 154.77418667-68.52334933 154.77418667-153.03748267 0-84.51959467-69.29339733-153.03748267-154.77418667-153.03748266z m0 230.06958933c-43.01892267 0-77.90045867-34.48832-77.90045866-77.03210667s34.881536-77.037568 77.90045866-77.037568c43.02984533 0 77.91138133 34.49378133 77.91138134 77.037568s-34.881536 77.03210667-77.91138134 77.03210667zM309.2676608 643.37783467c-85.475328 0-154.77418667 68.517888-154.77418667 153.03748266 0 84.51413333 69.29885867 153.03748267 154.77418667 153.03748267s154.76872533-68.52334933 154.76872533-153.03748267c0-84.51959467-69.29339733-153.03748267-154.76872533-153.03748266z m0 230.06958933c-43.02984533 0-77.90592-34.48832-77.90592-77.03210667s34.87607467-77.037568 77.90592-77.037568c43.024384 0 77.90592 34.49378133 77.90592 77.037568s-34.881536 77.03210667-77.90592 77.03210667z m0 0"
                                    fill="#1296db" p-id="3515"></path>
                            </svg>
                        </template>
                        <span>
                            剪切
                        </span>
                    </el-button>
                    <el-button type="primary" plain @click="cp">
                        <template #icon>
                            <svg t="1671014117550" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="8177" width="200" height="200">
                                <path
                                    d="M682.666667 341.333333h128v469.333334H341.333333v-128H213.333333V213.333333h469.333334v128z m0 85.333334v256h-256v42.666666h298.666666v-298.666666h-42.666666zM298.666667 298.666667v298.666666h298.666666V298.666667H298.666667z"
                                    fill="#1296db" p-id="8178"></path>
                            </svg>
                        </template>
                        <span>
                            复制
                        </span>
                    </el-button>
                </el-button-group>
                <template v-else>
                    <el-popover placement="bottom" :width="100" trigger="hover" popper-class="upload-label">
                        <div class="pan-upload-label">
                            <div @click="handleUploadFile">上传文件</div>
                            <div @click="handleUploadDirectory">上传文件夹</div>
                        </div>
                        <template #reference>
                            <el-button class="upload" type="primary" round>
                                <template #icon>
                                    <svg t="1671082676329" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="7509" width="200" height="200">
                                        <path
                                            d="M878.7 628.9c-11 0-20 9-20 20l0.5 210.4c0 11-9 20-20 20l-652-0.3c-11 0-20-9-20-20l0.5-209.1c0-11-9-20-20-20h-13.4c-11 0-20 9-20 20V908c0 11 2.3 20 5.1 20s14.1 0.1 25.1 0.1h3c11 0.1 29 0.1 40 0.1l651.2-0.6h59.6c6.3 0 11.3-9 11.3-20V648.9c0-11-9-20-20-20h-10.9z"
                                            fill="#ffffff" p-id="7510"></path>
                                        <path
                                            d="M753.9 416.9c7.8 7.8 20.5 7.8 28.3 0l10.7-10.7c7.8-7.8 7.8-20.5 0-28.3L527.2 112.4c-7.8-7.8-20.5-7.8-28.3 0L233.2 377.8c-7.8 7.8-7.8 20.5 0 28.3l10.7 10.7c7.8 7.8 20.5 7.8 28.3 0l199.5-199.5c7.8-7.8 14.1-5.1 14.1 5.9v477.7c0 11 9 20 20 20h15.1c11 0 20-9 20-20v-477c0-11 6.4-13.6 14.1-5.9l198.9 198.9z"
                                            fill="#ffffff" p-id="7511"></path>
                                    </svg>
                                </template>
                                <span>
                                    上传
                                </span>
                            </el-button>
                        </template>
                    </el-popover>

                    <el-button-group class="group">
                        <el-button type="primary" plain @click="mkdir">
                            <template #icon>
                                <svg t="1671082381152" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="5470" width="200" height="200">
                                    <path
                                        d="M484 443.1V528h-84.5c-4.1 0-7.5 3.1-7.5 7v42c0 3.8 3.4 7 7.5 7H484v84.9c0 3.9 3.2 7.1 7 7.1h42c3.9 0 7-3.2 7-7.1V584h84.5c4.1 0 7.5-3.2 7.5-7v-42c0-3.9-3.4-7-7.5-7H540v-84.9c0-3.9-3.1-7.1-7-7.1h-42c-3.8 0-7 3.2-7 7.1z"
                                        p-id="5471" fill="#1296db"></path>
                                    <path
                                        d="M880 298.4H521L403.7 186.2c-1.5-1.4-3.5-2.2-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"
                                        p-id="5472" fill="#1296db"></path>
                                </svg>
                            </template>
                            <span>
                                新建文件夹
                            </span>
                        </el-button>
                        <!-- <el-button type="primary" plain>
                            <template #icon>
                                <svg t="1671082420497" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="6509" width="200" height="200">
                                    <path
                                        d="M808.192 246.528a320.16 320.16 0 0 0-592.352 0A238.592 238.592 0 0 0 32 479.936c0 132.352 107.648 240 240 240h91.488a32 32 0 1 0 0-64H272a176.192 176.192 0 0 1-176-176 175.04 175.04 0 0 1 148.48-173.888l19.04-2.976 6.24-18.24C305.248 181.408 402.592 111.936 512 111.936a256 256 0 0 1 242.208 172.896l6.272 18.24 19.04 2.976A175.04 175.04 0 0 1 928 479.936c0 97.024-78.976 176-176 176h-97.28a32 32 0 1 0 0 64h97.28c132.352 0 240-107.648 240-240a238.592 238.592 0 0 0-183.808-233.408z"
                                        p-id="6510" fill="#1296db"></path>
                                    <path
                                        d="M649.792 789.888L544 876.48V447.936a32 32 0 0 0-64 0V876.48l-106.752-87.424a31.968 31.968 0 1 0-40.544 49.504l159.04 130.24a32 32 0 0 0 40.576 0l158.048-129.44a32 32 0 1 0-40.576-49.472z"
                                        p-id="6511" fill="#1296db"></path>
                                </svg>
                            </template>
                            <span>
                                云下载
                            </span>
                        </el-button> -->
                    </el-button-group>
                    <div class="capacity-uploadding">
                        <div class="capacity-box">
                            <div class="capacity">
                                <div class="capacity-real"
                                    :style="{ width: (totalCapacity == 0 ? 100 : usedCapacity * 100 / totalCapacity) + '%', backgroundColor: getCapacityRealColor(totalCapacity == 0 ? 100 : usedCapacity * 100 / totalCapacity) }">
                                </div>
                            </div>
                            <div class="label">{{ formatSize(usedCapacity) }}/{{ formatSize(totalCapacity) }}</div>
                        </div>
                    </div>
                    <el-badge :value="uploaddingFileCount" class="upload-task">
                        <el-button circle @click="showUploadTask">
                            <template #icon>
                                <svg t="1671103285011" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="3870" width="200" height="200">
                                    <path
                                        d="M576 631.466667V725.333333h170.666667c59.733333-8.533333 106.666667-64 106.666666-128 0-72.533333-55.466667-128-128-128-17.066667 0-29.866667 4.266667-42.666666 8.533334V469.333333c0-93.866667-76.8-170.666667-170.666667-170.666666s-170.666667 76.8-170.666667 170.666666c0 17.066667 4.266667 29.866667 4.266667 46.933334-8.533333-4.266667-17.066667-4.266667-25.6-4.266667C260.266667 512 213.333333 558.933333 213.333333 618.666667S260.266667 725.333333 320 725.333333h170.666667v-93.866666l-46.933334 46.933333L384 618.666667l149.333333-149.333334 149.333334 149.333334-59.733334 59.733333-46.933333-46.933333z m0 93.866666v85.333334h-85.333333v-85.333334h-42.666667v85.333334h-128C213.333333 810.666667 128 725.333333 128 618.666667c0-85.333333 55.466667-157.866667 128-183.466667C273.066667 311.466667 379.733333 213.333333 512 213.333333c110.933333 0 209.066667 72.533333 243.2 170.666667 102.4 12.8 183.466667 102.4 183.466667 213.333333s-85.333333 200.533333-192 213.333334h-128v-85.333334h-42.666667z"
                                        fill="#1296db" p-id="3871"></path>
                                </svg>
                            </template>
                        </el-button>
                    </el-badge>
                </template>
                <div class="block"></div>
                <div class="paste" v-if="currentCopyFiles.length">
                    <el-button type="primary" plain @click="paste">
                        <template #icon>
                            <svg t="1671362015327" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2740" width="200" height="200">
                                <path
                                    d="M917.219556 277.105778h-108.714667V200.647111a72.817778 72.817778 0 0 0-72.760889-72.760889h-124.871111v-11.605333a53.361778 53.361778 0 0 0-53.248-53.248h-39.253333V55.751111c0-15.928889-13.084444-29.013333-29.013334-29.013333H404.935111c-15.928889 0-29.013333 13.084444-29.013333 29.013333v7.281778h-39.253334a53.361778 53.361778 0 0 0-53.248 53.248v11.605333H152.462222A72.817778 72.817778 0 0 0 79.758222 200.647111v610.133333A72.817778 72.817778 0 0 0 152.462222 883.484444H261.12v62.008889a72.817778 72.817778 0 0 0 72.760889 72.704h389.802667l266.24-266.126222V349.923556a72.817778 72.817778 0 0 0-72.760889-72.817778zM331.832889 116.280889c0-2.616889 2.275556-4.835556 4.892444-4.835556h220.728889c2.673778 0 4.892444 2.275556 4.892445 4.835556v74.353778c0 2.616889-2.275556 4.892444-4.835556 4.892444H336.725333a4.892444 4.892444 0 0 1-4.835555-4.892444V116.280889zM261.233778 349.923556v485.262222H152.462222a24.405333 24.405333 0 0 1-24.291555-24.291556V200.647111c0-13.368889 10.922667-24.291556 24.291555-24.291555h131.015111v14.279111c0 29.354667 23.893333 53.304889 53.248 53.304889h220.728889c29.411556 0 53.304889-23.893333 53.304889-53.304889V176.355556h124.928c13.368889 0 24.291556 10.922667 24.291556 24.291555V277.048889h-426.097778a72.817778 72.817778 0 0 0-72.704 72.817778z m476.16 586.24v-144.554667c0-13.368889 10.808889-24.234667 24.177778-24.234667h144.554666l-168.732444 168.789334z m204.231111-217.201778h-180.053333c-40.049778 0-72.590222 32.540444-72.590223 72.647111v178.232889H333.937778a24.405333 24.405333 0 0 1-24.348445-24.291556V349.923556c0-13.312 10.979556-24.291556 24.348445-24.291556h583.281778c13.368889 0 24.291556 10.979556 24.291555 24.291556v369.038222z"
                                    fill="#1296db" p-id="2741"></path>
                                <path
                                    d="M835.982222 476.387556h-435.768889a24.234667 24.234667 0 0 0 0 48.412444h435.768889a24.291556 24.291556 0 0 0 24.234667-24.177778 24.291556 24.291556 0 0 0-24.234667-24.234666z m-193.649778 135.566222H400.270222a24.234667 24.234667 0 0 0 0 48.412444h242.062222a24.291556 24.291556 0 0 0 24.177778-24.177778 24.291556 24.291556 0 0 0-24.177778-24.234666z"
                                    fill="#1296db" p-id="2742"></path>
                            </svg>
                        </template>
                        <span>
                            粘贴
                        </span>
                    </el-button>
                </div>
            </div>
            <div class="breadcrumb">
                <div class="location">
                    <el-link class="back" type="primary" @click="goBack">返回上一级</el-link>
                    <span class="spacer"></span>
                    <el-breadcrumb separator=">">
                        <el-breadcrumb-item v-if="workDir.length < 2">
                            <el-link type="primary" @click="cd('/')">根目录</el-link>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item v-else v-for="(item, index) in workDir.split('/')">
                            <el-link type="primary" v-if="item === ''" @click="cd(getPath(index))">根目录</el-link>
                            <el-link type="primary" v-else @click="cd(getPath(index))">{{ item }}</el-link>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="views">
                    <!-- <div>列表</div> -->
                    <!-- <div>缩略</div> -->
                    <!-- <div>大图</div> -->
                </div>
            </div>
            <div class="content" ref="content">
                <el-table v-if="initedContentHeight" :data="list" style="width: 100%" :max-height="contentMaxHeight"
                    @selection-change="handleSelectionChange" @row-click="handleContentRowClick">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="文件名">
                        <template #default="scope">
                            <div v-if="scope.row.type" class="label">
                                <svg t="1671077932308" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="10131" width="200" height="200">
                                    <path
                                        d="M912 208H427.872l-50.368-94.176A63.936 63.936 0 0 0 321.056 80H112c-35.296 0-64 28.704-64 64v736c0 35.296 28.704 64 64 64h800c35.296 0 64-28.704 64-64v-608c0-35.296-28.704-64-64-64z m-800-64h209.056l68.448 128H912v97.984c-0.416 0-0.8-0.128-1.216-0.128H113.248c-0.416 0-0.8 0.128-1.248 0.128V144z m0 736v-96l1.248-350.144 798.752 1.216V784h0.064v96H112z"
                                        fill="#1296db" p-id="10132"></path>
                                </svg>
                                <el-link @click.stop="cd(scope.row.name)">{{ getFileName(scope.row.name) }}</el-link>
                            </div>
                            <div v-else class="label">
                                <fileIcon v-model="scope.row.name"
                                    :link="PREVIEW_IMAGE_URL + scope.row.id + '&g=' + scope.row.updateTime + '&token=' + user.token">
                                </fileIcon>
                                <el-link>{{ getFileName(scope.row.name) }}</el-link>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="修改时间" width="200">
                        <template #default="scope">
                            {{ dateFormat(scope.row.updateTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="大小" width="150">
                        <template #default="scope">
                            {{ formatSize(scope.row.size) }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="right">
            <div class="search">
                <div class="input-box">
                    <el-input v-model="searchPanFile" placeholder="搜索网盘文件..." @input="search">
                        <template #append>
                            <el-button @click="searchClick">
                                <svg style="width: 16px;height: 16px;" t="1671022756999" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9127"
                                    width="200" height="200">
                                    <path
                                        d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z"
                                        p-id="9128" fill="#1296db"></path>
                                </svg>
                            </el-button>
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="detail" v-if="activeFile">
                <div class="file-detail">文件{{ activeFile.type ? '夹' : '' }}详情</div>
                <div class="preview">
                    <svg v-if="activeFile.type" t="1671077932308" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="10131" width="200" height="200">
                        <path
                            d="M912 208H427.872l-50.368-94.176A63.936 63.936 0 0 0 321.056 80H112c-35.296 0-64 28.704-64 64v736c0 35.296 28.704 64 64 64h800c35.296 0 64-28.704 64-64v-608c0-35.296-28.704-64-64-64z m-800-64h209.056l68.448 128H912v97.984c-0.416 0-0.8-0.128-1.216-0.128H113.248c-0.416 0-0.8 0.128-1.248 0.128V144z m0 736v-96l1.248-350.144 798.752 1.216V784h0.064v96H112z"
                            fill="#1296db" p-id="10132"></path>
                    </svg>
                    <fileIcon v-else v-model="activeFile.name" size="200"
                        :link="PREVIEW_IMAGE_URL + activeFile.id + '&g=' + activeFile.updateTime + '&token=' + user.token"
                        enableImagePreview />
                </div>
                <div class="fileName">
                    {{ getFileName(activeFile.name) }}
                </div>
                <div class="kv">
                    <div class="k">创建时间：</div>
                    <div class="v">{{ activeFile.createTime }}</div>
                </div>
                <div class="kv">
                    <div class="k">最后修改：</div>
                    <div class="v">{{ activeFile.updateTime }}</div>
                </div>
                <div class="kv">
                    <div class="k">文件{{ activeFile.type ? '夹' : '' }}大小：</div>
                    <div class="v">{{ formatSize(activeFile.size) }}</div>
                </div>
            </div>
            <div v-else-if="searchResult != null" class="search-result">
                <div v-if="searchResult === 0" v-loading="searchResult === 0" class="loadding"></div>
                <div v-else v-for="item in searchResult" class="search-result-row" @click="cdDir(item)">
                    <div v-if="item.type" class="label">
                        <svg t="1671077932308" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="10131" width="16" height="16">
                            <path
                                d="M912 208H427.872l-50.368-94.176A63.936 63.936 0 0 0 321.056 80H112c-35.296 0-64 28.704-64 64v736c0 35.296 28.704 64 64 64h800c35.296 0 64-28.704 64-64v-608c0-35.296-28.704-64-64-64z m-800-64h209.056l68.448 128H912v97.984c-0.416 0-0.8-0.128-1.216-0.128H113.248c-0.416 0-0.8 0.128-1.248 0.128V144z m0 736v-96l1.248-350.144 798.752 1.216V784h0.064v96H112z"
                                fill="#1296db" p-id="10132"></path>
                        </svg>
                        <el-link>{{ getFileName(item.name) }}</el-link>
                    </div>
                    <div v-else class="label">
                        <fileIcon v-model="item.name"
                            :link="PREVIEW_IMAGE_URL + item.id + '&g=' + item.updateTime + '&token=' + user.token"
                            size="16">
                        </fileIcon>
                        <el-link>{{ getFileName(item.name) }}</el-link>
                    </div>
                    <div class="updateTime">{{ item.updateTime }}</div>
                </div>

            </div>
        </div>
        <div class="fiexd-btn fiexd-btn-home" @click="goHome">
            <svg style="width: 25px;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8="">
                <path fill="currentColor" d="M512 128 128 447.936V896h255.936V640H640v256h255.936V447.936z"></path>
            </svg>
        </div>
        <!-- 高版本的el-dialog会启用custom-class，而改用class属性，class="taskDialog" -->
        <el-dialog custom-class="taskDialog" v-model="uploadTaskDialogVisible" title="任务列表">
            <el-table :data="uploadTasks" max-height="450">
                <el-table-column property="fileName" label="文件">
                    <template #default="scope">
                        <div class="fileNameBox" ref="fileNameBox">
                            <fileIcon v-model="scope.row.fileName" size="30" :link="scope.row.link"></fileIcon>
                            <div class="nameAndSize">
                                <div class="name" :style="{ width: nameWidth + 'px' }" :title="scope.row.fileName">{{
                                        scope.row.fileName
                                }}</div>
                                <div class="size" v-if="scope.row.uploadedBytes >= scope.row.totalBytes">
                                    <span>{{ formatSize(scope.row.totalBytes) }}</span>
                                    <span class="blank-space"></span>
                                    <span>{{ getSpeed(scope.row) }}</span>
                                    <span class="blank-space"></span>
                                    <span>{{ scope.row.errorMessage }}</span>
                                </div>
                                <div class="size" v-else>
                                    <!-- 2.5KB/1MB -->
                                    <span>{{ formatSize(scope.row.uploadedBytes) }}/{{
                                            formatSize(scope.row.totalBytes)
                                    }}</span>
                                    <span class="blank-space"></span>
                                    <!-- 10% -->
                                    <span v-if="scope.row.totalBytes != 0">{{ Math.floor(scope.row.uploadedBytes * 100 /
                                            scope.row.totalBytes)
                                    }}%</span>
                                    <span class="blank-space"></span>
                                    <!-- 1.1MB/s -->
                                    <span>{{ getSpeed(scope.row) }}</span>
                                    <span class="blank-space"></span>
                                    <!-- 错误信息 -->
                                    <span>{{ scope.row.errorMessage }}</span>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="130">
                    <template #default="scope">
                        <div class="control">
                            <el-button v-if="scope.row.uploadedBytes / scope.row.totalBytes >= 1" round
                                class="openInDir" title="转到文件所在位置">
                                <template #icon>
                                    <svg t="1671110136085" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4862" width="200" height="200">
                                        <path
                                            d="M855.72 866.93H167.75c-20.2 0-36.57-16.38-36.57-36.57V193.11c0-20.2 16.38-36.57 36.57-36.57H409.5c20.2 0 36.57 16.38 36.57 36.57s-16.38 36.57-36.57 36.57H204.32v564.11h614.83V410.12c0-20.2 16.38-36.57 36.57-36.57 20.2 0 36.57 16.38 36.57 36.57v420.23c0 20.2-16.37 36.58-36.57 36.58z"
                                            fill="#1296db" p-id="4863"></path>
                                        <path
                                            d="M855.72 446.69H456.86c-17.2 0-32.06-11.98-35.73-28.77L373.76 200.9c-4.3-19.73 8.2-39.23 27.94-43.54 19.71-4.3 39.21 8.2 43.53 27.93l41.08 188.25h369.41c20.2 0 36.57 16.38 36.57 36.57 0 20.21-16.37 36.58-36.57 36.58z"
                                            fill="#1296db" p-id="4864"></path>
                                        <path
                                            d="M783.26 446.69c-20.2 0-36.57-16.38-36.57-36.57V282.34h-325.7c-20.2 0-36.57-16.38-36.57-36.57s16.38-36.57 36.57-36.57h362.28c20.2 0 36.57 16.38 36.57 36.57v164.36c0 20.19-16.38 36.56-36.58 36.56z"
                                            fill="#1296db" p-id="4865"></path>
                                    </svg>
                                </template>
                            </el-button>
                            <template v-else>
                                <el-button v-if="scope.row.paused" round class="pause" title="暂停">
                                    <template #icon>
                                        <svg t="1671110871071" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="1936" width="200" height="200">
                                            <path
                                                d="M122.112664 953.98846l816.371172-407.954319c0.723477-0.342808 1.411139-0.689708 2.099824-1.051959l1.107217-0.550539 0-0.077771c11.644201-6.757914 19.488867-19.377326 19.488867-33.827433 0-14.452153-7.844665-27.070542-19.488867-33.828456l0-0.228197L120.241037 65.955154c-1.14508-0.649799-2.310625-1.24127-3.51301-1.77646l-2.481518-1.240247-0.230244 0.170892c-4.047176-1.431605-8.41874-2.196015-12.96222-2.196015-21.589714 0-39.096437 17.506722-39.096437 39.096437 0 0.192382 0 0.382717 0 0.593518l0 821.276902 0.01842 0c0.438998 21.210068 17.754363 38.255279 39.078017 38.255279C108.80559 960.13546 116.040365 957.887256 122.112664 953.98846z"
                                                fill="#1296db" p-id="1937"></path>
                                        </svg>
                                    </template>
                                </el-button>
                                <el-button v-else round class="continue" title="继续">
                                    <template #icon>
                                        <svg t="1671110728852" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="5837" width="200" height="200">
                                            <path
                                                d="M686.480358 119.560026c0-32.377408 26.325575-58.644655 58.644655-58.644655 32.386618 0 58.645678 26.420743 58.645678 58.644655l0 781.930779c0 32.376385-26.325575 58.644655-58.645678 58.644655-32.385595 0-58.644655-26.419719-58.644655-58.644655L686.480358 119.560026zM217.321072 119.560026c0-32.377408 26.325575-58.644655 58.645678-58.644655 32.385595 0 58.644655 26.420743 58.644655 58.644655l0 781.930779c0 32.376385-26.325575 58.644655-58.644655 58.644655-32.385595 0-58.645678-26.419719-58.645678-58.644655L217.321072 119.560026z"
                                                fill="#1296db" p-id="5838"></path>
                                        </svg>
                                    </template>
                                </el-button>
                                <el-button round class="cancel" title="取消">
                                    <template #icon>
                                        <svg t="1671111095803" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="6950" width="200" height="200">
                                            <path
                                                d="M850.538343 895.516744c-11.494799 0-22.988574-4.386914-31.763424-13.161764L141.103692 204.669426c-17.548678-17.534352-17.548678-45.992497 0-63.525825 17.548678-17.548678 45.977147-17.548678 63.525825 0l677.671227 677.685553c17.548678 17.534352 17.548678 45.992497 0 63.525825C873.526917 891.128807 862.032118 895.516744 850.538343 895.516744z"
                                                fill="#1296db" p-id="6951"></path>
                                            <path
                                                d="M172.867116 895.516744c-11.494799 0-22.988574-4.386914-31.763424-13.161764-17.548678-17.534352-17.548678-45.992497 0-63.525825l677.671227-677.685553c17.548678-17.548678 45.977147-17.548678 63.525825 0 17.548678 17.534352 17.548678 45.992497 0 63.525825L204.629517 882.354979C195.85569 891.128807 184.360891 895.516744 172.867116 895.516744z"
                                                fill="#1296db" p-id="6952"></path>
                                        </svg>
                                    </template>
                                </el-button>
                            </template>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog v-model="downloadFileDialogVisible" title="请选择下载方式" custom-class="downloadFileDialog">
            <!-- <div class="row">
                <el-button type="warning">压缩包下载</el-button>
                <div>下载的文件内容不能过大</div>
            </div> -->
            <div class="row">
                <div>
                    <el-button type="success" @click="shellDownload">复制命令行下载命令</el-button>
                </div>
                <div>
                    <span>文件将下载到</span>
                    <span @click="changeDownloadLocation" class="downloadLocation" v-if="downloadLocation">{{
                            downloadLocation
                    }}</span>
                    <span @click="changeDownloadLocation" class="downloadLocation" v-else>桌面/netpanDownload</span>
                </div>
                <div>执行Powershell命令来下载文件</div>
                <div style="color: #f00;">Tip:警惕执行别人给的命令，小心电脑中病毒</div>
            </div>
            <div class="row">
                <el-button type="info" @click="directDownload">直接下载</el-button>
                <div>目录中的内容会被提取出来</div>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import {
    mkdir,
    getFiles,
    uploadFragment,
    prepareUpload,
    getDownloadToken,
    upload,
    PREVIEW_IMAGE_URL,
    TEMP_DOWNLOAD_URL,
    deleteFile, rename,
    cp,
    cut,
    search
} from '@/api/netpan.js';
import dateFormat from '@/utils/dateFormat.js';
import { endsWith, method } from 'lodash';
import fileIcon from '@/components/netpan/fileIcon.vue'
import fragmentFile from '@/puigins/fragmentFile.js'
import { reactive } from 'vue'
import loadImage from '@/utils/loadImage.js'
import copy from '@/utils/copy.js'
const DEFAULT_DOWNLOAD_LOCATION = "DEFAULT_DOWNLOAD_LOCATION"
export default {
    data() {
        return {
            list: [],
            searchPanFile: '',
            contentMaxHeight: 0,
            initedContentHeight: false,
            workDir: '',
            workDirItem: null,
            selectedFiles: [],
            uploadTaskDialogVisible: false,
            downloadFileDialogVisible: false,
            PREVIEW_IMAGE_URL,
            activeFile: null,
            uploadTasks: [],
            nameWidth: 150,
            usedCapacity: 0,
            totalCapacity: 0,
            downloadLocation: null,
            currentCopyFiles: [],//剪贴板
            isCp: false,//为false则是剪切,true是复制
            searchResult: null
        }
    }, methods: {
        dateFormat,
        loadImage,
        isNaN,
        goHome() {
            this.$router.push('/');
        },
        handleContentRowClick(row) {
            this.activeFile = row
        },
        searchClick() {
            //节流
            let time = new Date().getTime()
            if (time - (window.nhdsajbmkubn || 0) > 500) {
                window.nhdsajbmkubn = time
                this.search(true)
            }

        },
        cdDir(item) {
            if (item.type) {
                this.cd(item.name)
            } else {
                this.cd(this.getParentName(item.name))
            }
        },
        search(flag) {
            this.activeFile = null
            //防抖
            clearTimeout(window.abdinahjln)
            window.abdinahjln = setTimeout(() => {
                if (this.searchPanFile !== '') {
                    this.searchResult = 0
                    search(this.searchPanFile).then(res => {
                        if (res.code == 200) {
                            let time = new Date(res.endTime).getTime()
                            if (time > (window.lastSearchPanFileTime || 0)) {
                                window.lastSearchPanFileTime = time
                                this.searchResult = res.data
                            }
                        }
                    })
                } else {
                    this.searchResult = []
                }
            }, flag ? 0 : 500);
        },
        formatSize(size) {
            if (size <= 1024) {
                return size + 'B';
            }
            size /= 1024;
            if (size < 1024) {
                return size.toFixed(2) + 'K';
            }
            size /= 1024;
            if (size < 1024) {
                return size.toFixed(2) + 'M';
            }
            return (size / 1024).toFixed(2) + 'G';
        },
        getCapacityRealColor(v) {
            if (v > 0.9) {
                return '#F56C6C'
            } else if (v > 0.8) {
                return '#E6A23C'
            } else {
                return '#06a6ff'
            }
        },
        getParentName(name) {
            console.log(name)
            let lastIndex = name.lastIndexOf("/")
            return name.substring(0, lastIndex)
        },
        getSpeed(task) {
            //经过的秒数
            let endTime = task.endTime || new Date().getTime()
            let duration = Math.floor((endTime - task.startUploadTime) / 1000)
            if (duration == 0) {
                duration = 1
            }
            let avg = Math.floor(task.uploadedBytes / duration)
            return this.formatSize(avg) + "/s"
        },
        getFiles() {
            this.list = null
            getFiles(this.workDir).then(res => {
                if (res.code == 200) {
                    this.workDir = res.data.currentDir.name
                    this.workDirItem = res.data.currentDir
                    this.list = res.data.list
                    this.usedCapacity = res.data.usedCapacity
                    this.totalCapacity = res.data.totalCapacity
                } else {
                    this.$msgError(res)
                    this.list = []
                }
            }).catch(e => {
                this.list = []
            })
        },
        getFileName(name) {
            return name.substring(name.lastIndexOf("/") + 1)
        },
        cd(dir) {
            this.workDir = dir
            this.getFiles()
        },
        goBack() {
            if (this.workDir.length > 1) {
                this.cd(this.workDir.substring(0, this.workDir.lastIndexOf('/')))
            }
        },
        getPath(index) {
            let pos = -1
            for (let i = 0, k = -1; i < this.workDir.length; i++) {
                if (this.workDir.charAt(i) === "/") {
                    k++
                    if (k == index) {
                        pos = i
                        break
                    }
                }
            }
            if (pos == -1) {
                return this.workDir
            }
            let res = this.workDir.substring(0, this.workDir.indexOf('/', pos))
            return res
        },
        handleSelectionChange(arr) {
            this.selectedFiles = arr
        },
        mkdir() {
            let reg = new RegExp('[\\\\/:*?\"<>|]');
            let inputValidator = str => {
                if (reg.test(str)) {
                    return false
                }
                for (let item of this.list) {
                    if (item.name === str || item.name.endsWith("/" + str)) {
                        return '文件名重复'
                    }
                }
            }
            this.$prompt('新建文件夹', '提示', {
                confirmButtonText: '新建',
                cancelButtonText: '取消',
                inputPlaceholder: '请输入文件夹名',
                inputValidator,
                inputErrorMessage: '文件夹名不合法'
            })
                .then(({ value }) => {
                    mkdir(this.workDirItem.id, value).then(res => {
                        if (res.code == 200) {
                            this.getFiles()
                        } else {
                            this.$msgError(res)
                        }
                    })
                })
                .catch(() => { })
        },
        handleUploadFile() {
            let inputObj = document.createElement('input')
            inputObj.setAttribute('type', 'file');
            inputObj.setAttribute("style", 'visibility:hidden');
            inputObj.setAttribute("multiple", "true")
            document.body.appendChild(inputObj);
            inputObj.click();
            inputObj.onchange = () => {
                let fileList = []
                for (let file of inputObj.files) {
                    fileList.push(file)
                }
                this.fileList = fileList
                document.body.removeChild(inputObj)
                this.uploadFiles()
            }
        },
        uploadFiles() {
            this.fileList.forEach(this.uploadFile)
        },
        file2Base64(file) {
            return new Promise((resolve, reject) => {
                const fr = new FileReader();
                fr.readAsDataURL(file);
                fr.onload = (result) => {
                    const base64Str = result.currentTarget.result;
                    resolve(base64Str);
                };
            })
        },
        uploadFile(file) {
            let dir = file.webkitRelativePath
            let task = reactive({
                fileName: file.name,
                file,
                maxFragmentIndex: 0,
                uploadedBytes: 0,
                totalBytes: file.size,
                dir: this.workDir + (dir ? "/" + dir : ""),
                paused: false,
                endTime: null,
                startUploadTime: new Date().getTime(),
                link: null,
                fragmentUploadByte: {}
            })
            if (file.type.includes('image/')) {
                this.file2Base64(file).then((url) => {
                    task.link = url
                })
            }

            this.uploadTasks.push(task)
            if (file.size == 0) {
                task.endTime = new Date().getTime()
                task.errorMessage = "不能上传空文件"
                return
            }
            dir = dir.substring(0, dir.lastIndexOf('/'))
            prepareUpload(file.size, file.name, this.workDirItem.id, dir).then(res => {
                if (res.code == 200) {
                    let fragmentSize = res.data.fragmentSize
                    let token = res.data.token
                    let arr = fragmentFile(file, fragmentSize)
                    let indexArr = []
                    for (let i = 0; i < arr.length; i++) {
                        indexArr.push(i)
                    }
                    task.maxFragmentIndex = Math.ceil(file.size / fragmentSize)
                    this.uploadFragment(arr, 0, indexArr, token, task)
                } else {
                    this.$msgError(res)
                }
            })

        },
        uploadFragment(arr, indexPosition, indexArr, token, task) {
            let index = indexArr[indexPosition]
            if (index == undefined) {
                debugger
            }
            uploadFragment(token, index, arr[index], (e) => {
                task.fragmentUploadByte[index] = e.loaded - e.total + arr[index].size
                let uploadedBytes = 0
                for (let k in task.fragmentUploadByte) {
                    uploadedBytes += task.fragmentUploadByte[k]
                }
                task.uploadedBytes = uploadedBytes
            }).then(res => {
                if (indexPosition == indexArr.length - 1) {
                    task.endTime = new Date().getTime()
                    upload(token).then(res => {
                        if (res.code != 200) {
                            this.$msgError(res)
                        }
                    })
                } else {
                    this.uploadFragment(arr, indexPosition + 1, indexArr, token, task)
                }
            })
        },
        handleUploadDirectory() {
            let inputObj = document.createElement('input')
            inputObj.setAttribute('type', 'file');
            inputObj.setAttribute("style", 'visibility:hidden');
            inputObj.setAttribute("webkitdirectory", "true")
            document.body.appendChild(inputObj);
            inputObj.click();
            inputObj.onchange = () => {
                let fileList = []
                for (let file of inputObj.files) {
                    fileList.push(file)
                }
                this.fileList = fileList
                document.body.removeChild(inputObj)
                this.uploadFiles()
            }
        },
        showUploadTask() {
            this.uploadTaskDialogVisible = true
            let fun = () => {
                if (this.$refs.fileNameBox) {
                    this.nameWidth = this.$refs.fileNameBox.offsetWidth - 40
                } else {
                    setTimeout(fun, 50);
                }
            }
            if (this.uploadTasks.length) {
                this.$nextTick(fun)
            }
        },
        downloadFile() {
            this.downloadFileDialogVisible = true
            this.downloadLocation = window.localStorage.getItem(DEFAULT_DOWNLOAD_LOCATION)
        },
        shellDownload() {
            let arr = []
            this.selectedFiles.forEach(item => {
                arr.push(item.id)
            })
            let ids = arr.join(",")
            getDownloadToken(this.workDirItem.id, ids).then(res => {
                if (res.code == 200) {
                    let map = res.data.fileIdAndPath
                    let token = res.data.token
                    let url = TEMP_DOWNLOAD_URL
                    let userToken = this.user.token
                    let downloadLocation = this.downloadLocation
                    let shell = `$t="${token}";$ut="${userToken}";$url="${url}";`
                    let arr = []
                    let makedDir = {}
                    let ids = []
                    let paths = []
                    let fs = []
                    if (downloadLocation == null) {
                        arr.push(`$d=[System.Environment]::GetFolderPath("Desktop")+"/netpanDownload"`)
                    } else {
                        arr.push(`$d="${downloadLocation}"`)
                    }
                    arr.push("mkdir $d -Force | out-null")
                    arr.push(`cd $d`)
                    for (let key in map) {
                        let file = map[key]
                        let dir = file.substring(0, file.lastIndexOf("/"))
                        //需要创建的目录
                        if (dir !== "" && !makedDir[dir]) {
                            arr.push(`mkdir ${dir} -Force | out-null`)
                            makedDir[dir] = 1
                        }
                        if (!dir.endsWith("/")) {
                            dir = dir + "/"
                        }
                        ids.push(`"${key}"`)
                        paths.push(`"${dir}"`)
                        let fileName = file.substring(file.lastIndexOf("/") + 1)
                        fs.push(`"${fileName}"`)
                    }
                    arr.push(`$ps=${paths.join(",")}`)

                    if (ids.length == 1) {
                        //如果数组只有一项，那这样定义数组时，会当成字符串。
                        //巧合的是，paths这个数组不会有问题，因为不管paths是["/"]还是"/",paths[0]都是"/"
                        arr.push(`$ids=${ids[0]},""`)
                        arr.push(`$fs=${fs[0]},""`)
                    } else {
                        arr.push(`$ids=${ids.join(",")}`)
                        arr.push(`$fs=${fs.join(",")}`)
                    }
                    let str = `\
echo "======";\
echo "======";\
echo "${ids.length}个文件将被下载到\${d}";\
$startTime=[DateTime]::Now.Ticks;\
echo "文件名\`t\`t\`t耗时\`t剩余";\
for(\$i=0;\$i -lt ${ids.length};\$i=\$i+1)\
{\
$id=$ids[$i];\
$path=$ps[$i];\
$f=$fs[$i];\
$start=[DateTime]::Now.Ticks;\
(new-object System.Net.WebClient).DownloadFile("\${url}?id=\${id}&token=\${t}&ut=\${ut}","\${d}/\${path}\${f}");\
$duration=([DateTime]::Now.Ticks-$start)/10000000;\
$sy=${ids.length}-\$i-1;\
echo "\${path}\${f}\`t\`t\`t\${duration}秒\`t\${sy}";\
}\
$durationTime=([DateTime]::Now.Ticks-$startTime)/10000000;\
echo "${ids.length}个文件下载到\${d}，总耗时\${durationTime}秒";\
echo "======";\
echo "======";\
`
                    arr.push(str)
                    shell += arr.join(";")
                    //console.log(shell)
                    copy(shell)
                    this.$message.success("已复制命令")
                    //http://127.0.0.1/api/netpan/tempDownload?id=1603764002008162306&ut=786e4ca510c6425399acfca58d46b7f5&token=042bca771fbc4a4f8f675109777b1680
                } else {
                    this.$msgError(res)
                }
            })
        },
        changeDownloadLocation() {
            let reg1 = new RegExp('[a-zA-Z]:[/\\\\]');
            let reg2 = new RegExp('[:*?\"<>|]');

            let inputValidator = str => {
                if (str == null || str === '') {
                    return true
                }
                if (str.includes("//", "\\\\")) {
                    return false
                }

                return reg1.test(str) && !reg2.test(str.substring(3))
            }
            this.$prompt('要下载到哪个文件夹？（留空则默认）', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPlaceholder: '桌面/netpanDownload',
                inputValidator,
                inputErrorMessage: '文件夹名称不合法',
                closeOnClickModal: false
            })
                .then(({ value }) => {
                    if (value) {
                        this.downloadLocation = value
                        window.localStorage.setItem("DEFAULT_DOWNLOAD_LOCATION", value)
                    } else {
                        this.downloadLocation = null
                        window.localStorage.removeItem("DEFAULT_DOWNLOAD_LOCATION")
                    }

                })
                .catch(() => { })
        },
        directDownload() {
            let arr = []
            this.selectedFiles.forEach(item => {
                arr.push(item.id)
            })
            let ids = arr.join(",")
            getDownloadToken(this.workDirItem.id, ids).then(res => {
                if (res.code == 200) {
                    let token = res.data.token
                    let url = TEMP_DOWNLOAD_URL
                    let userToken = this.user.token

                    let arr = []
                    for (let id in res.data.fileIdAndPath) {
                        let openUrl = `${url}?id=${id}&token=${token}&ut=${userToken}`
                        arr.push(openUrl)
                    }
                    this.batchDownload(arr, 0)
                } else {
                    this.$msgError(res)
                }
            })
        },
        batchDownload(urls, index) {
            if (urls.length == 0 || index == urls.length) {
                return
            }
            let current = urls[index]
            const iframe = document.createElement("iframe");
            iframe.style.display = "none";
            iframe.style.position = "absolute";
            iframe.src = current;
            document.body.appendChild(iframe);
            setTimeout(() => {
                this.batchDownload(urls, index + 1)
            }, 100)
        },
        deleteFile() {
            this.$confirm(
                '确定删除选中的文件以及其子文件吗？',
                '警告',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    let arr = []
                    this.selectedFiles.forEach(item => {
                        arr.push(item.id)
                    })
                    let ids = arr.join(",")
                    deleteFile(ids).then(res => {
                        if (res.code == 200) {
                            this.$message.success("已删除" + res.data + "个文件及子文件")
                            this.getFiles()
                        } else {
                            this.$msgError(res)
                        }
                    })
                })
                .catch(() => { })
        },
        rename() {
            let reg = new RegExp('[\\\\/:*?\"<>|]');
            let inputValidator = str => {
                if(str==null||str===''){
                    return false
                }
                if (reg.test(str)) {
                    return false
                }
                
                for (let item of this.list) {
                    if (item.name === str || item.name.endsWith("/" + str)) {
                        return '文件名重复'
                    }
                }
            }
            this.$prompt('重命名', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPlaceholder: '请输入文件夹名',
                inputValidator,
                inputErrorMessage: '文件夹名不合法',
                inputValue:this.getFileName(this.selectedFiles[0].name)
            })
                .then(({ value }) => {
                    rename(this.selectedFiles[0].id, value).then(res => {
                        if (res.code == 200) {
                            this.$message.success("修改成功")
                            this.getFiles()
                        } else {
                            this.$msgError(res)
                        }
                    })
                })
                .catch(() => { })
        },
        cut() {
            this.currentCopyFiles = []
            this.selectedFiles.forEach(item => {
                this.currentCopyFiles.push(item)
            })
            this.isCp = false
            this.$message.success("已剪切")
        }, cp() {
            this.currentCopyFiles = []
            this.selectedFiles.forEach(item => {
                this.currentCopyFiles.push(item)
            })
            this.isCp = true
            this.$message.success("已复制")
        },
        paste() {
            this.$confirm(
                '确定粘贴？文件将被覆盖！',
                '警告',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    let arr = []
                    this.currentCopyFiles.forEach(item => {
                        arr.push(item.id)
                    })
                    let ids = arr.join(",")
                    let fun
                    if (this.isCp) {
                        fun = cp
                    } else {
                        fun = cut
                    }
                    fun(ids, this.workDirItem.id).then(res => {
                        if (res.code == 200) {
                            this.$message.success(res.data)
                            this.getFiles()
                            this.currentCopyFiles = []
                        } else {
                            this.$msgError(res)
                        }
                    })
                })
                .catch(() => { })
        }
    },
    mounted() {
        this.contentMaxHeight = this.$refs.content.offsetHeight
        this.initedContentHeight = true
    },
    created() {
        this.getFiles()
    },
    components: {
        fileIcon
    },
    computed: {
        user() {
            return this.$store.state.user.user
        },
        uploaddingFileCount() {
            let i = 0;
            this.uploadTasks.forEach(item => {
                if (item.uploadedBytes < item.totalBytes) {
                    i++
                }
            })
            if (i == 0) {
                return ""
            }
            return i
        }
    }
};
</script>

<style lang="scss">
.downloadFileDialog {
    .row {
        padding-bottom: 15px;

        button {
            margin-bottom: 5px;
        }

        .downloadLocation {
            color: #06a6ff;
        }
    }
}

.taskDialog {
    .fileNameBox {
        display: flex;
        align-items: center;
        gap: 10px;

        .nameAndSize {
            display: flex;
            flex-direction: column;
            justify-content: center;

            .name {
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 250px;
                white-space: nowrap;
            }

            .size {
                color: #878d9c;
                font-size: 12px;
            }
        }

        .blank-space {
            padding: 0 5px;
        }
    }



    .control {
        button {
            padding: 8px;
        }
    }
}

.upload-label {
    padding: 0 !important;
    min-width: unset !important;

    .pan-upload-label {
        div {
            padding: 6px 8px;

            &:hover {
                cursor: pointer;
                background-color: #f7f8fc;
            }
        }
    }
}

#netpan {
    display: flex;
    height: 100%;
    padding: 0 20px;

    .el-link {
        cursor: pointer;
    }

    .left {
        flex: 1;
        display: flex;
        flex-direction: column;

        .control {
            display: flex;
            padding: 15px;

            .block {
                flex: 1;
            }

            .paste {}

            .upload {
                margin-right: 15px;
            }

            .group {
                button {
                    border-left-color: unset;
                    border-right-color: unset;

                    &:hover {
                        path {
                            fill: #fff;
                        }
                    }
                }
            }
        }

        .capacity-uploadding {
            margin: 0 20px;
            padding: 6px 0 0;

            .capacity-box {
                display: flex;
                flex-direction: column;

                .capacity {
                    width: 150px;
                    height: 8px;
                    background-color: #efefef;
                    border-radius: 5px;
                    overflow: hidden;

                    .capacity-real {
                        height: 100%;
                        border-radius: 5px;
                    }
                }

                .label {
                    font-size: 12px;
                    color: #afb2bf;
                }
            }
        }

        .breadcrumb {
            display: flex;
            padding: 5px 15px 15px;

            * {
                user-select: none;
            }

            .location {
                flex: 1;
                display: flex;
                gap: 15px;

                .back {
                    font-size: 12px;
                }

                .spacer {
                    display: inline-block;
                    width: 2px;
                    height: 100%;
                    background-color: #ccc;
                    border-radius: 1px;
                }
            }

            .views {
                display: flex;
                gap: 15px;

                div {}
            }

            .el-breadcrumb {
                line-height: unset;

                a {
                    color: var(--el-link-text-color);
                    font-weight: 400;
                }
            }
        }

        .content {
            flex: 1;

            .label {
                display: flex;
                align-items: center;
                gap: 10px;

                svg {
                    width: 16px;
                    height: 16px;
                }
            }
        }
    }

    .right {
        width: 360px;
        padding: 15px;
        display: flex;
        gap: 15px;
        flex-direction: column;

        .detail {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .file-detail {
                font-weight: 700;
                font-size: 12px;
            }

            .preview {
                text-align: center;

                img {
                    max-width: 80%;
                    max-height: 100%;
                }
            }

            .fileName {
                font-weight: 700;
                font-size: 14px;
            }

            .kv {
                display: flex;
                gap: 10px;
                font-size: 12px;
                color: #8f939e;
            }
        }

        .search-result {
            .search-result-row {
                display: flex;
                justify-content: space-between;
                cursor: pointer;

                &:hover {
                    background-color: #efefef;
                }
            }

            .loadding {
                height: 300px;
            }

            .label {
                display: flex;
                align-items: center;
                gap: 5px;
                padding: 3px 0;
            }
        }
    }
}
</style>
